<script setup lang="ts">
import { provideDesigner } from '../DesignerRuntime'
import DesignerTest from '../DesignerTest.vue'

// 初始化设计器环境
const engine = provideDesigner()

function runValidation() {
  console.log('=== Starting Designer Validation ===')
  
  // 验证扩展点是否正常注册
  const requiredExtensions = [
    'COMMAND_EXECUTOR',
    'PROPERTY_EDITOR',
    'STATE_MANAGER'
  ]
  
  const missingExtensions = requiredExtensions.filter(ext => {
    return !engine.getExtension(DESIGNER_EXTENSION_POINT[ext])
  })
  
  if (missingExtensions.length > 0) {
    console.error('❌ Missing extensions:', missingExtensions)
  } else {
    console.log('✅ All required extensions registered')
  }
  
  // 验证完成后显示结果
  setTimeout(() => {
    const logs = [
      'Command executed',
      'Text editor registered',
      'Current state:'
    ]
    
    const missingLogs = logs.filter(log => {
      return !Array.from(console._logs).some(l => l.includes(log))
    })
    
    if (missingLogs.length === 0) {
      console.log('✅ Designer validation passed! All systems operational.')
    } else {
      console.error('❌ Validation failed. Missing logs:', missingLogs)
    }
  }, 500)
}

// 拦截console.log用于验证
console._logs = []
const originalLog = console.log
console.log = function(...args) {
  console._logs.push(args.join(' '))
  originalLog.apply(console, args)
}

onMounted(runValidation)
</script>

<template>
  <div class="test-page">
    <h1>Designer Validation Test</h1>
    <DesignerTest />
    <p>Check browser console for validation results...</p>
  </div>
</template>